<template>
  <div class="container_edit">
    <div class="header">
      <p>签约管理>>录入签约信息</p>
      <el-button
        type="primary"
        @click="back"
      >返回</el-button>
    </div>
    <div class="main">
      <el-form
        :model="params"
        :rules="rules"
        ref="user"
        label-width="150px"
        class=""
      >
        <el-form-item
          label="用户昵称："
          prop="userId"
        >
          <el-select v-model="params.userId" filterable placeholder="请选择" @change="handleSelect">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.nickname ? item.nickname : '默认'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="姓名"
          prop="realname"
        >
          <el-input
            v-model="params.realname"
            placeholder="请输入"
            :disabled="user && user.realname ? true : false"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="mobile"
        >
          <el-input
            v-model="params.mobile"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!--<el-form-item-->
          <!--label="所属写字楼"-->
          <!--prop="unitPrice"-->
        <!--&gt;-->
          <!--<el-select v-model="params.bu" placeholder="请选择">-->
            <!--<el-option-->
              <!--v-for="item in buildingList"-->
              <!--:key="item.id"-->
              <!--:label="item.realname ? item.realname : '默认'"-->
              <!--:value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item
          label="办公室名称"
          prop="roomId"
        >
          <el-select v-model="params.roomId" placeholder="请选择">
            <el-option
              v-for="item in roomList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="签约日期"
          prop="signingDate"
        >
          <el-date-picker
            v-model="params.signingDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="签约期限"
          prop="signingLimit"
        >
          <el-input
            v-model="params.signingLimit"
            placeholder="请输入"
            @blur="handleBlurLimit"
          ></el-input>年
        </el-form-item>
        <el-form-item
          label="到期日期"
          prop="dueDate"
        >
          <el-input
            v-model="params.dueDate"
            placeholder="请输入"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="每月交租提醒日期"
          prop="remindDay"
        >
          <el-input
            v-model="params.remindDay"
            placeholder="请输入1~28之间的数字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSave('user')"
          >保存</el-button>
          <el-button @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  let CONSTANT = require("../../constant/constant.js");
  let common = require("../../common.js");
  var searchService,map,markers = [];
  export default {
    data() {
      return {
        tableData: [],
        upLoadUrl: "",
        imageUrl: "",
        videoUrl: "",
        params: {
          id: "",
          dueDate: "",
          mobile: "",
          realname: "",
          remindDay: "",
          roomId: "",
          signingDate: "",
          signingLimit: "",
          userId: ""
        },
        fileList: [],
        rules: {
          mobile: [
            { required: true, message: "请输入手机号", trigger: "blur" }
          ],
          realname: [
            { required: true, message: "请输入姓名", trigger: "blur" }
          ],
          remindDay: [
            { required: true, message: "请输入每月提醒交租时间", trigger: "blur" }
          ],
          roomId: [
            { required: true, message: "请选择办公室", trigger: "blur" }
          ],
          signingDate: [
            { required: true, message: "请选择签约日期", trigger: "blur" }
          ],
          signingLimit: [
            { required: true, message: "请输入签约期限", trigger: "blur" }
          ],
          userId: [
            { required: true, message: "请选择用户", trigger: "blur" }
          ]
        },
        inputVisible: false,
        inputValue: '',
        userList: [],
        buildingList: [],
        roomList: [],
        user: ""
      };
    },
    created() {
    },
    mounted() {
      this.id = this.$route.query.id;
      let sessionId = sessionStorage.getItem("sessionId");
      this.upLoadUrl =
        CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS + "?sessionId=" + sessionId;
      if (this.id) {
        this.getInfo();
      }
      this.getUserList()
      this.getBuildingList()
      this.getRoomList()
    },
    components: {
      "bg-editor": () => import("../common/bg-editor.vue")
    },
    methods: {
      getInfo: function() {
        let url = CONSTANT.URL.SIGN.detail;
        common.get(url,this.id, res => {
          if (res.status == 200) {
            let data = res.data.bussData;
            this.params = data;
            this.fileList = []
            this.params.tags = []
            this.params.images.map( item => {
              this.fileList.push({
                url: item.fileUrl
              })
            })
            this.videoUrl = this.params.videoUrl
//            this.imageUrl = data.headPortraitUrl
          }
        });
      },
      getUserList: function() {
        let url = CONSTANT.URL.LIST.userPage;
        let data = {
          pageIndex: 1,
          pageSize: 100000,
        };
        this.loading = true;
        common.requestAjax(url, JSON.stringify(data), null, res => {
          this.loading = false;
          let data = res.data;
          this.userList = data.bussData;
        });
      },
      getBuildingList: function() {
        let url = CONSTANT.URL.BUILDING.list;
        let data = {
          pageIndex: 1,
          pageSize: 100000,
        };
        this.loading = true;
        common.requestAjax(url, JSON.stringify(data), null, res => {
          this.loading = false;
          let data = res.data;
          this.buildingList = data.bussData;
        });
      },
      getRoomList: function() {
        let url = CONSTANT.URL.ROOM.list;
        let data = {
          pageIndex: 1,
          pageSize: 100000,
        };
        this.loading = true;
        common.requestAjax(url, JSON.stringify(data), null, res => {
          this.loading = false;
          let data = res.data;
          this.roomList = data.bussData;
        });
      },
      handleSelect(e) {
        this.user = this.userList.filter( item => {return item.id == e && item.realname}).length ? this.userList.filter( item => {return item.id == e && item.realname})[0] : ''
        console.log(this.user)
        this.params.realname = this.user.realname
      },
      handleBlurLimit(e) {
        if (this.params.signingDate) {
          let t = this.params.signingDate.split("-")
          this.params.dueDate = (JSON.parse(t[0])+JSON.parse(this.params.signingLimit))+"-"+t[1]+"-"+t[2]
        }
      },
      handleSave: function(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let url = CONSTANT.URL.SIGN.save;
            common.requestAjax(url, JSON.stringify(this.params), '', res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功！"
                });
                this.$router.back()
              } else {
                this.$message({
                  type: "warning",
                  message: res.data.errMsg
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      beforeAvatarUpload(file) {
        let url = CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS;
        let param = {
          suffix: file.name.split(".")[1], // 文件后缀  png
          contentType: file.type // 文件类型  image/png
        };
        common.requestAjax(url, '', param, res => {
          this.upLoadUrl = res.data.bussData.uploadUrl;
          this.params.imageKey += res.data.bussData.fileKey+',';
          console.log(this.params.imageKey)
          common.uploadFile(this.upLoadUrl, file, file.type, res1 => {
            this.fileList.push({
              url: res.data.bussData.downloadUrl,
              fileKey: res.data.bussData.fileKey,
            })
          })
        });
      },
      handleImageRemove() {

      },
      beforeVideoUpload(file) {
        let url = CONSTANT.URL.SYSTEM.UPLOADFILEBYCOS;
        let param = {
          suffix: file.name.split(".")[1], // 文件后缀  png
          contentType: file.type // 文件类型  image/png
        };
        common.requestAjax(url, '', param, res => {
          this.upLoadUrl = res.data.bussData.uploadUrl;
          this.params.videoKey = res.data.bussData.fileKey;
          common.uploadFile(this.upLoadUrl, file, file.type, res1 => {
            this.videoUrl = res.data.bussData.downloadUrl;
          })
        });
      },
      editorInfo(e) {

      },
      back() {
        this.$router.back();
      },
      handleClose(tag) {
        this.params.tags.splice(this.params.tags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.params.tags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      http(){}
    }
  };
</script>
<style lang="scss" scoped>
  #map_canvas {
    width:500px;
    height:500px;
  }
  .table-content {
    width: 500px;
    .table-item {
      position: relative;
      border: 1px solid #dcdfe6;
      i {
        position: absolute;
        right: -30px;
        top: 20px;
        cursor: pointer;
        font-size: 16px;
      }
      &:first-child {
        background-color: #409eff;
        color: #fff;
        border-right: 0px solid #dcdfe6;
        .table-list {
          padding: 0;
        }
      }

      .table-list {
        flex: 2;
        text-align: center;
        padding: 5px 0;
        .el-input {
          height: 70% !important;
          width: 90%;
        }
        &:first-child {
          flex: 3;
          border-right: 1px solid #dcdfe6;
        }
      }
    }
  }
</style>
